<script setup>
import {saveApi} from "@/api/EmpAPI";
import MyForm from "@/components/MyForm.vue";
import {onMounted, shallowReactive, shallowRef} from "vue";
import {RULE} from "@/const";
import MyNav from "@/components/MyNav.vue";
import router from "@/router";
import {listApi} from "@/api/DeptAPI";
import {getResponseData} from "@/utils";

// 表单数据 + 表单规则
let optionItems = [];
let items = shallowRef([
  {'label': '登录账号', 'prop': 'username', 'required':true, 'span': 12},
  {'label': '登陆密码', 'prop': 'password', 'required':true, 'span': 12},
  {'label': '真实姓名', 'prop': 'realname', 'required':true, 'span': 12},
  {'label': '身份证号', 'prop': 'idcard', 'required':true, 'span': 12},
  {'label': '手机号码', 'prop': 'phone', 'required':true, 'span': 12},
  {'label': '微信号码', 'prop': 'wechat', 'required':true, 'span': 12},
  {'label': '电子邮件', 'prop': 'email', 'required':true, 'span': 12},
  {'label': '所在部门', 'prop': 'fkDeptId', 'type': 'select',  'optionItems': optionItems, 'required':true, 'span': 12},
  {'label': '入职日期', 'prop': 'hiredate', 'type': 'date', 'required':true, 'span': 12},
  {'span': 12, 'hidden': true   },
  {'label': '详细地址', 'prop': 'address', 'type': 'textarea', 'span': 12},
  {'label': '员工描述', 'prop': 'info', 'type': 'textarea', 'span': 12},
]);
let data = shallowReactive({});
let rules = {
  'info': RULE.COMMON_INFO,
  'address': RULE.COMMON_INFO,
  'phone': RULE.PHONE,
  'email': RULE.EMAIL,
};

function success() {
  setTimeout(() => router.push('/Emp'), 1000);
}

async function listDept(){
  let res = await listApi();
  let depts = getResponseData(res);
  Object.values(depts).forEach(dept => {
    optionItems.push({'label': dept['title'], 'value': dept['id']})
  })
}

/*======================= 加载函数 ===========================*/
onMounted(() => {
  listDept();
})

</script>

<template>

  <my-nav :items="[
    {'icon': 'User', 'label': '员工管理'},
    {'icon': 'User', 'label': '员工列表', 'url': '/Emp'},
    {'icon': 'User', 'label': '添加员工'},
  ]"/>

  <div class="emp-insert-body">
    <my-form type="insert"
             :span="2"
             :items="items"
             :data="data"
             :rules="rules"
             :api="saveApi"
             :fn="success"
    />
  </div>

</template>

<style scoped lang="scss">

.emp-insert-body {
  margin-top: 50px;
}

</style>